var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.strokeStyle = '#fff';
 ctx.lineWidth = 3;
  ctx.shadowBlur = 5; 
  ctx.shadowColor = '#fff'; 
  var milliseconds = 0; 
  var minutes = 0; 
  var hour = 0; 
  var date = ""; 
  var ctxBack = canvas.getContext("2d"); 
  var numBack = canvas.getContext("2d"); 
  ctxBack.lineWidth = 1; 
  ctxBack.shadowBlur = 0; 
  ctxBack.shadowColor = '#fff';
   function pageInit() { showTime(); showBack(); drawSecPin(); drawMinPin(); drawHouPin(); setPoint(); setNum(); }
function setNum() {
    numBack.save(); 
    numBack.translate(125, 125); 
    numBack.beginPath(); 
    numBack.fillStyle = '#fff'; 
    numBack.font = "15px Helvetica"; 
    for (var i = 0; i < 60; i++) { if (i % 5 == 0) 
        { numBack.lineWidth = 5; 
            var xPoint = Math.sin(i * 6 * 2 * Math.PI / 360) * 97.5; 
            var yPoint = -Math.cos(i * 6 * 2 * Math.PI / 360) * 97.5;
             numBack.fillText(i == 0 ? 12 : i / 5, i == 0 ? -15 : 
                xPoint - 10, i == 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10); 
            } 
        }
    numBack.stroke(); 
    numBack.closePath(); 
    numBack.restore();
}
function drawSecPin() { 
    ctxBack.save(); 
    ctxBack.translate(125, 125); 
    ctxBack.rotate(milliseconds / 60 * 2 * Math.PI);
     ctxBack.beginPath(); 
     ctxBack.strokeStyle = '#AFEEEE'; 
     ctxBack.lineWidth = 1; 
     ctxBack.lineJoin = "bevel";
      ctxBack.miterLimit = 10; 
      ctxBack.moveTo(0, 15); 
      ctxBack.lineTo(1.5, -87.5); 
      ctxBack.lineTo(6.5, -82.5); 
      ctxBack.lineTo(0, -105); 
      ctxBack.lineTo(-6.5, -82.5); 
      ctxBack.lineTo(-1.5, -87.5); 
      ctxBack.lineTo(0, 15); 
      ctxBack.stroke(); 
      ctxBack.closePath(); 
      ctxBack.restore(); 
    }
function drawMinPin() { 
    ctxBack.save(); 
    ctxBack.translate(125, 125); 
    ctxBack.rotate(minutes * 6 * Math.PI / 180); 
    ctxBack.beginPath(); 
    ctxBack.strokeStyle = '#20B2AA';
     ctxBack.lineWidth = 1; 
     ctxBack.lineJoin = "bevel"; 
     ctxBack.miterLimit = 10; 
     ctxBack.moveTo(0, 10); 
     ctxBack.lineTo(1.5, -72.5); 
     ctxBack.lineTo(5, -67.5); 
     ctxBack.lineTo(0, -90); 
     ctxBack.lineTo(-5, -67.5); 
     ctxBack.lineTo(-1.5, -72.5); 
     ctxBack.lineTo(0, 10); 
     ctxBack.stroke();
      ctxBack.closePath(); 
      ctxBack.restore(); }
function drawHouPin() { 
    ctxBack.save(); 
    ctxBack.translate(125, 125);
     ctxBack.rotate(hour * 30 * Math.PI / 180);
      ctxBack.beginPath(); 
      ctxBack.strokeStyle = '#87CEFA'; 
      ctxBack.lineWidth = 1; 
      ctxBack.lineJoin = "bevel"; 
      ctxBack.miterLimit = 10; 
    ctxBack.moveTo(0, 10); 
    ctxBack.lineTo(1.5, -72.5); 
    ctxBack.lineTo(5, -67.5); 
    ctxBack.lineTo(0, -90); 
    ctxBack.lineTo(-5, -67.5); 
    ctxBack.lineTo(-1.5, -72.5); 
    ctxBack.lineTo(0, 10); 
    ctxBack.stroke();
    ctxBack.closePath();
    ctxBack.restore(); 
}
function setPoint() { 
    ctxBack.beginPath(); 
    ctxBack.fillStyle = 'white';
     ctxBack.arc(125, 125, 1.5, 0, 1 * Math.PI);
      ctxBack.stroke();
     }
function showBack() {
    for (var i = 0; i < 60; i++) { 
        ctxBack.save(); 
        ctxBack.translate(125, 125);
         ctxBack.rotate(i / 60 * 2 * Math.PI);
          ctxBack.beginPath(); 
          ctxBack.strokeStyle = '#7FFFD4'; 
          ctxBack.moveTo(0, -125); 
          ctxBack.lineWidth = i % 5 == 0 ? 5 : 2; 
          ctxBack.lineTo(0, -115); 
          ctxBack.stroke(); 
          ctxBack.closePath(); 
          ctxBack.restore(); 
        }
    ctxBack.beginPath(); ctxBack.arc(125, 125, 115, 0, 2 * Math.PI); ctxBack.stroke();
}
function degToRad(degree) {
    var result; var factor = Math.PI / 180; if (degree == 0) { result = 270 * factor; } else { result = degree * factor; }
    return result;
}
function showTime() {
    var now = new Date(); 
    var today = now.toLocaleDateString(); 
    var time = now.toLocaleTimeString(); 
    var day = now.getDay(); 
    var hrs = now.getHours();
     var min = now.getMinutes(); 
     var sec = now.getSeconds(); 
     var mil = now.getMilliseconds();
      var smoothsec = sec + (mil / 1000); 
      var smoothmin = min + (smoothsec / 60); 
      var hours = hrs + (smoothmin / 60); milliseconds = smoothsec; 
      minutes = smoothmin; hour = hours; switch (day) {
        case 1: date = '一'
            break; case 2: date = '二'
            break; case 3: date = '三'
            break; case 4: date = '四'
            break; case 5: date = '五'
            break; case 6: date = '六'
            break; case 0: date = '日'
            break;
    }
    gradient = ctx.createRadialGradient(125, 125, 2.5, 125, 125, 150);
    //  gradient.addColorStop(0, "#"); 
     gradient.addColorStop(1, "#545454"); 
     ctx.fillStyle = gradient; 
     ctx.fillRect(0, 0, 250, 250);
      ctx.beginPath(); 
      ctx.strokeStyle = '#87CEFA'; 
      ctx.arc(125, 125, 107.5, degToRad(0), degToRad((hours * 30) - 90)); 
      ctx.stroke(); 
      ctx.beginPath(); 
      ctx.strokeStyle = '#20B2AA'; 
      ctx.arc(125, 125, 110, degToRad(0), degToRad(smoothmin * 6 - 90));
       ctx.stroke(); ctx.beginPath(); 
       ctx.strokeStyle = '#AFEEEE'; 
       ctx.arc(125, 125, 112.5, degToRad(0), degToRad(smoothsec * 6 - 90)); 
       ctx.stroke(); ctx.font = "12px Helvetica Bold"; 
       ctx.fillStyle = '#7FFFD4'; 
       ctx.fillText(today + "/星期" + date, 75, 115);
        ctx.font = "12px Helvetica Bold"; ctx.fillStyle = '#7FFFD4'; 
        ctx.fillText(time, 95, 140);
}
setInterval(pageInit, 50);